<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Dining</title>
		<link href="css/custom-theme/jquery-ui-1.8.21.custom.css" type="text/css" rel="stylesheet"/>
		<link href="css/list.css" type="text/css" rel="stylesheet"/>
		<script type="text/javascript" src="js/jquery1.7.2.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('#header').load('common/header.html','',function(){
				$("#header .menu li a").removeClass("current_page");
          		$("a#rs").addClass("current_page");
			});
			$('#footer').load('common/footer.html');
		});
		</script>
        <script src="js/slides.min.jquery.js"></script>
        <script src="js/jquery-ui-1.8.20.custom.min.js"></script>
         <style type="text/css" media="screen">
            .slides_container {
                width:954px;
                height:370px;
            }
            .slides_container div {
                width:100%;
                display:block;
            }
#focus {width:800px; height:210px; overflow:hidden; position:relative; margin-top:5px}
#focus ul {height:210px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:60px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:0;}
#focus .next {right:0; background-position:right top;}
        </style>
        <style type="text/css">
			.menu ul li .current_page{
				background: #FC9A24;
   				border-color: #FFFFFF;
    			border-top-left-radius: 4px;
    			border-top-right-radius: 4px;
				border-style: solid solid none;
				border-width: 1px 1px medium;
    			position: relative;
    			z-index: 11;
    			top:-2px;
    			box-shadow:0 -3px 2px #666666;
			}
		</style>
<script type="text/javascript">
$(function(){
	var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
	var len = $("#focus ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#focus").append(btn);
	$("#focus .btnBg").css("opacity",0.5);

	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
		index = $("#focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

	//上一页、下一页按钮透明度处理
	$("#focus .preNext").css("opacity",0.2).hover(function() {
		$(this).stop(true,false).animate({"opacity":"0.5"},300);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2"},300);
	});

	//上一页按钮
	$("#focus .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	//下一页按钮
	$("#focus .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#focus ul").css("width",sWidth * (len));
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#focus").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},4000); //此4000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
		//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
		$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
	}
});

</script>
	</head>
	<body>
<div id="header">
</div>
<!--
<div class="secondary_se">
				<div class="seinput">
					<span class="imgspan"><img src="img/s_span.png" width="2" height="37" /></span><span class="stext">I want to find:</span>
					<input type="text" class="sinput" value="find something" /><img src="img/sebutton.png" width="73" height="30" class="simg" />
				</div>
			
			</div>
-->
<div class="table_list">
			<div class="container">
				<div class="MarketList_light">
					
				<div class="Wish_List">
					
					<a href="#" class="Shop_by_Department"><span>Sort by</span> Dishes</a>
				</div>
				
				<div class="MarketList_search">
					<p>Search for:</p>
					<div class="MarketList_search_box">
						<span class="search_left_bg">
						</span>
						<span class="search_body">
							<input value="dish name, address..." class="MarketList_search_input">
						</span>
						<a href="" class="search_right">
							Go
						</a>
					</div>
				</div>
				

				<div class="clear_float"></div>
				</div>
			</div>
		</div>
<div class="wrap">
	<div class="lefts">
		<div class="cate_box">
			<ul>
		
				<li><span class="na"></span><span class="dot"><img src="img/point.jpg" /></span><a href="#">Chinese</a></li>
				<li><span class="na"></span><span class="dot"><img src="img/point.jpg" /></span><a href="#">Chinese</a></li>
				<li><span class="na"></span><span class="dot"><img src="img/point.jpg" /></span><a href="#">Chinese</a></li>
				<li><span class="na"></span><span class="dot"><img src="img/point.jpg" /></span><a href="#">Chinese</a></li>
				<li><span class="na"></span><span class="dot"><img src="img/point.jpg" /></span><a href="#">Chinese</a></li>
				<li><span class="na"></span><span class="dot"><img src="img/point.jpg" /></span><a href="#">Chinese</a></li>
			</ul>
		</div>
		
		<div class="left_box">
			<ul class="atmosphere">
				<li class="attitle">Atmosphere</li>
				<li><span class="dot"><img src="img/point.jpg" /></span><a href="#">Atmosphere</a><span class="atnum">(42)</span></li>
				<li><span class="dot"><img src="img/point.jpg" /></span><a href="#">Atmosphere</a><span class="atnum">(42)</span></li>
				<li><span class="dot"><img src="img/point.jpg" /></span><a href="#">Atmosphere</a><span class="atnum">(42)</span></li>
				<li><span class="dot"><img src="img/point.jpg" /></span><a href="#">Atmosphere</a><span class="atnum">(42)</span></li>
				<li><span class="dot"><img src="img/point.jpg" /></span><a href="#">Atmosphere</a><span class="atnum">(42)</span></li>
				<li><span class="dot"><img src="img/point.jpg" /></span><a href="#">Atmosphere</a><span class="atnum">(42)</span></li>
			</ul>
		</div>
		
		<div class="left_box top5">
			<ul class="top5t">
				<li class="attitle">Top 5 restaurant</li>
			</ul>
			<ul>
				<li><a href="#">Top 5 restaurant</a></li>
				<li><img src="img/5star.gif" /><span class="atnum">(42)</span></li>
			</ul>
			<ul>
				<li><a href="#">Top 5 restaurant</a></li>
				<li><img src="img/5star.gif" /><span class="atnum">(42)</span></li>
			</ul>
			<ul>
				<li><a href="#">Top 5 restaurant</a></li>
				<li><img src="img/5star.gif" /><span class="atnum">(42)</span></li>
			</ul>
			<ul>
				<li><a href="#">Top 5 restaurant</a></li>
				<li><img src="img/5star.gif" /><span class="atnum">(42)</span></li>
			</ul>
		</div>
		<!--left end-->
	</div>
	<div class="rights">
		<div class="banner" id="focus">
		<ul>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/banner.gif" width="800" height="210" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/banner.gif" width="800" height="210" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/banner.gif" width="800" height="210" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/banner.gif" width="800" height="210" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/banner.gif" width="800" height="210" /></a></li>
			<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/banner.gif" width="800" height="210" /></a></li>
		</ul>
		</div>
		<div class="btitle">Recommend restaurants<span>(23)</span></div>
		<div class="listbody" id="listbody">
			<div class="sort clearfix"><span>Per capita<img src="img/nar.png" /></span>Sorting: <a href="#" class="cr">popularity</a> | <a href="#">grade</a> | <a href="#">mark number</a> </div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="list">
				<ul class="one"><img src="img/xf.gif" width="72" height="72" /></ul>
				<ul class="two">
					<li class="tx1">Dry mashroom<span class="ts">(American)</span><span class="tel"><img src="img/tel.png" width="18" height="12" />2344890</span></li>
					<li class="tx2"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="tx3"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="tx4"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="three"><img src="img/5star.gif" />(5 marks)</ul>
				<ul class="four">$12</ul>
				<ul class="listdetail">
					<li class="de1"><span class="ptt">Description:</span></li>
					<li class="de2">Fried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizzaFried dry mashroom, mashroom pizza</li>
					<li class="de3"><span class="ptt">Address:</span> 401 Poydras Street, New Orleans, LA</li>
					<li class="de4"><span class="ptt">Atmosphere:</span> Friends dinner, Leisure snacks </li>
					<li class="de5"><span class="ptt">Recommend dishes:</span> Fried dry mashroom, mashroom pizza</li>
				</ul>
				<ul class="bar clearfix"><span class="rtipt"><a href="javascript:;" onclick="givemark(1);">Give a mark</a> | <a href="#">Add to favorites</a> | <a href="#">Map</a>  <img style="margin-left:20px" src="img/facebook_blue.png" />  <img src="img/tweet_blue.png" /> </span><a href="javascript:;" class="showdetail">Detail <img src="img/arrow-270-small-icon.png" class="ar" /></a></ul>
			</div>
			<div class="pagebar"><span class="current">1</span><a href="javascript:;">2</a><a href="javascript:;">3</a><span>....</span><a href="javascript:;">>Next</a></div>
		</div>
		
<script  type="text/javascript">
function givemark(id){$("#givemark").dialog({
	modal:true,
	resizable: false,
	title: "Give a mark",
	width: 460,
	buttons: [
		{
			text: "Submit",
			click: function() { $(this).dialog("close"); }
		},
		{
			text: "Cancel",
			click: function() { $(this).dialog("close"); }
		}
	]
	});
}


$(".showdetail").click(function(){
	var isshow = $(this).parents('div.list').find('ul.listdetail').is(":visible");
	if(isshow){
		$(this).find('img').attr('src','img/arrow-270-small-icon.png');
		$(this).parents('div.list').find('ul.listdetail').slideUp();
	}else{
		$(this).find('img').attr('src','img/arrow-090-small-icon.png');
		$(this).parents('div.list').find('ul.listdetail').slideDown();
	}
})
$("#listbody div.list").hover(
	function(){$(this).addClass('listhover');$(this).find(".bar").css('visibility','visible');},
	function(){$(this).removeClass('listhover');$(this).find(".bar").css('visibility','hidden');}
);

</script>		
	
	</div>
	<div style="clear:both"></div>
</div>
<div id="footer">
	
</div>

<!--dialog-->
<div id="givemark" style="display:none">
	<span>Overall assessment: </span>
	<span class="starbar">
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="1">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="2">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="3">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="4">&nbsp;</a>
	<a href="javascript:;" class="starsbar" onfocus="this.blur();" star="5">&nbsp;</a>
	</span>
	<span>Clcik stars to give a mark</span>
</div>
<script type="text/javascript">
$(".starbar a").hover(
	function(){
		var star = $(this).attr('star');
		$('.starbar').addClass("starbar"+star);
	},
	function(){
		var star = $(this).attr('star');
		$('.starbar').removeClass("starbar"+star);
	}
)
</script>
<!--dialog-->
	</body>
</html>
